<template>
  <div class="card" v-loading="loading">
    <div class="card-body">
      <div class="d-flex mb-3">
        <el-button type="text" icon="el-icon-back" @click="$router.back()">
          {{ relatedData.customer_name || '-' }}贷后管理
        </el-button>
      </div>
      <div class="d-flex align-items-center">
        <div class="flex-1 d-flex align-items-center">
          <div class="after-dashboard" @click="handleChangeStatus">
            <svg viewBox="0 0 100 100">
              <path
                d="M 50 50 m 0 47 a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,94"
                class="after-dashboard__process"
                stroke="#DEDEDE"
              ></path>
              <path
                d="M 50 50 m 0 47 a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,94"
                class="after-dashboard__process"
                :stroke="afterStatus.color"
              ></path>
              <path
                d="M 50 50 m 0 47 a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,94"
                class="after-dashboard__process after-dashboard__dash"
                stroke="#FFF"
              ></path>
              <path
                d="M 50 50 m 0 40 a 40,40 0 1 1 0,-80 a 40,40 0 1 1 0,80"
                class="after-dashboard__inner"
                :style="{ strokeDasharray: `${innerProcessLength}px, 251.327px` }"
                stroke="#FFAB19"
              ></path>
              <path
                d="M 50 50 m 0 40 a 40,40 0 1 1 0,-80 a 40,40 0 1 1 0,80"
                class="after-dashboard__inner"
                :style="{ strokeDasharray: `${innerProcessPercent}px, 251.327px` }"
                stroke="#47CBC9"
              ></path>
            </svg>
            <div class="after-dashboard__text">
              <span class="font-weight-bold" :style="{ color: afterStatus.color }">
                {{ afterStatus.label }}
              </span>
              <div class="after-dashboard__hint">
                <span>项目状态</span>
                <div><i class="fa fa-caret-down"></i></div>
              </div>
            </div>
          </div>
          <div class="ml-4">
            <!-- <div class="text-muted">{{$utils.dateFormat(relatedData.load_end_date, 'yyyy年MM月dd日')}}到期</div> -->
            <!-- <div>负责人：{{relatedData.contact_person}}</div>
            <div>联系电话：{{relatedData.mobile_no}}</div> -->
          </div>
        </div>
        <div class="flex-1">
          <p>{{ $utils.dateFormat(relatedData.load_end_date, 'yyyy年MM月dd日') }}</p>
          <span class="text-muted">到期时间</span>
        </div>
        <div class="flex-1">
          <p class="text-funds">{{ relatedData.warranty_amount || '-' }}</p>
          <span class="text-muted">放款金额(万元)</span>
        </div>
        <div class="flex-1">
          <p class="text-funds">{{ relatedData.left_funds || '-' }}</p>
          <span class="text-muted">在保余额(万元)</span>
        </div>
      </div>
    </div>

    <after-register-dialog
      title="项目状态修改"
      :visible.sync="editVisible"
      :register-data="editRow"
      :related-id="relatedId"
      :table-id="editId"
      :current-status="behindStatus"
      change-status
      @success="handleEditSuccess"
      @change-status="onChangeStatus"
    ></after-register-dialog>
  </div>
</template>

<script>
import AfterRegisterDialog from '@/credit/views/city/self/after/AfterRegisterDialog'

export const enumAfterStatus = {
  0: { label: '待管理', color: '#0076C4' },
  1: { label: '正常', color: '#5CB85C' },
  2: { label: '关注', color: '#F2A615' },
  3: { label: '次级', color: '#DE6521' },
  4: { label: '可疑', color: '#E54526' },
  5: { label: '损失', color: '#B21F2A' },
  6: { label: '已完结', color: '#DEDEDE' },
}

export default {
  components: {
    AfterRegisterDialog,
  },
  props: {},
  data() {
    return {
      innerProcessLength: 188.496,
      loading: false,
      relatedId: '',
      relatedData: {},
      params: {
        'customer_related_id.eq': '',
      },
      tableName: 'datum_one_county_industry',
      behindStatus: '',
      afterStatus: enumAfterStatus[0],

      // 改变项目状态
      editId: '',
      editVisible: false,
      editRow: {},
    }
  },
  computed: {
    innerProcessPercent() {
      const leftFunds = +this.relatedData.left_funds || 0
      const replyFunds = +this.relatedData.warranty_amount || 0
      const payFunds = Math.max(replyFunds - leftFunds, 0)
      return (replyFunds ? payFunds / replyFunds : 1) * this.innerProcessLength
    },
  },
  watch: {
    relatedData: {
      handler: function (val) {
        this.setStatus(val.load_beh_status)
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.relatedId = this.$route.query.id
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      if (!this.relatedId) return
      this.params['customer_related_id.eq'] = this.relatedId

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params)
      )
      this.loading = false

      this.relatedData = (res && res.data && res.data.length && res.data[0]) || {}
    },
    handleChangeStatus() {
      this.editId = ''
      this.editRow = {
        load_beh_status: this.behindStatus,
      }
      this.editVisible = true
    },
    handleEditSuccess() {
      this.$emit('success', {})
    },
    onChangeStatus(status) {
      this.setStatus(status)
    },
    setStatus(status) {
      this.behindStatus = `${status || ''}`
      this.afterStatus = enumAfterStatus[status] || enumAfterStatus[0]
    },
  },
}
</script>
<style lang="scss" scoped>
.after-dashboard {
  width: 100px;
  height: 100px;
  margin-left: 2rem;
  position: relative;
  cursor: pointer;
}
.after-dashboard__process {
  stroke-dasharray: 221.482px, 295.31px;
  stroke-dashoffset: -36.9137px;
  stroke-linecap: round;
  stroke-width: 4;
  fill-opacity: 0;
}
.after-dashboard__dash {
  stroke-dasharray: 2px 32px;
  stroke-linecap: butt;
}
.after-dashboard__inner {
  stroke-dashoffset: -31.4159px;
  stroke-linecap: round;
  stroke-width: 1;
  fill-opacity: 0;
}
.after-dashboard__text {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.after-dashboard__hint {
  margin-top: 0.5rem;
  font-size: 80%;
  color: $gray-600;
}
.text-funds {
  font-size: 1.5rem;
}
</style>
